<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米商城</title>
    <link rel="stylesheet" href="./小米.css">
    <link rel="stylesheet" href="./font_4622482_agp0r4ordob/iconfont.css">
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="page menu">
            <div class="left-area">
                <ul>
                    <li>
                        <a href="">小米商城</a>
                    </li>
                    <li>
                        <a href="">MIUI</a>
                    </li>
                    <li>
                        <a href="">loT</a>
                    </li>
                    <li>
                        <a href="">云服务</a>
                    </li>
                    <li>
                        <a href="">天星数科</a>
                    </li>
                    <li>
                        <a href="">有品</a>
                    </li>
                    <li>
                        <a href="">小爱开放平台</a>
                    </li>
                    <li>
                        <a href="">企业团购</a>
                    </li>
                    <li>
                        <a href="">资质证照</a>
                    </li>
                    <li>
                        <a href="">协议规则</a>
                    </li>
                    <li>
                        <a href="">下载app</a>
                    </li>
                    <li>
                        <a href="">智能生活</a>
                    </li>
                </ul>
            </div>
            <div class="right-area">
                <ul>
                    <li>
                        <a class="login" href="">登录</a>
                    </li>
                    <li>
                        <a class="registry" href="">注册</a>
                    </li>
                    <li>
                        <a href="">消息通知</a>
                    </li>
                    <li>
                        <i class="iconfont icon-gouwuche"></i>
                        <a href="">购物车 (0)</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 以下全部 -->
    <div class="top">
        <div class="top-left">
            <img src="./picture/logo.png" alt="">
        </div>
        <ul>
            <li>
                <a href="">Xiaomi手机</a>
            </li>
            <li>
                <a href="">Redmi手机</a>
            </li>
            <li>
                <a href="">电视</a>
            </li>
            <li>
                <a href="">笔记本</a>
            </li>
            <li>
                <a href="">平板</a>
            </li>
            <li>
                <a href="">家电</a>
            </li>
            <li>
                <a href="">路由器</a>
            </li>
            <li>
                <a href="">服务中心</a>
            </li>
            <li>
                <a href="">社区</a>
            </li>
        </ul>
        <div class="search">
            <form action="">
                <input type="text" placeholder="洗衣机">
                <button class="iconfont icon-fangdajing"></button>
            </form>
        </div>
    </div>
    <div class="box">
        <!-- 轮播图 -->
        <div class="banner">
            <div class="banner-left">
                <ul>
                    <li>
                        <span>手机</span>
                        <span class="iconfont icon-dayu1"></span>
                    </li>
                    <li>
                        <span>电视</span>
                        <span class="iconfont icon-dayu1"></span>
                    </li>
                    <li>
                        <span>家电</span>
                        <span class="iconfont icon-dayu1"></span>
                    </li>
                    <li>
                        <span>笔记本 平板</span>
                        <span class="iconfont icon-dayu1"></span>
                    </li>
                    <li>
                        <span>出行 穿戴</span>
                        <span class="iconfont icon-dayu1"></span>
                    </li>
                    <li>
                        <span>耳机 音箱</span>
                        <span class="iconfont icon-dayu1"></span>
                    </li>
                    <li>
                        <span>健康 儿童</span>
                        <span class="iconfont icon-dayu1"></span>
                    </li>
                    <li>
                        <span>生活 箱包</span>
                        <span class="iconfont icon-dayu1"></span>
                    </li>
                    <li>
                        <span>智能 路由器</span>
                        <span class="iconfont icon-dayu1"></span>
                    </li>
                    <li>
                        <span>电源 配件</span>
                        <span class="iconfont icon-dayu1"></span>
                    </li>
                </ul>
            </div>
            <div class="banner-right">
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="./picture/beijing.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./picture/beijing01.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./picture/beijing02.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./picture/beijing03.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./picture/beijing04.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./picture/beijing05.jpg" alt=""></div>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
        <!-- 四个方块 -->
        <div class="square">
            <div class="square-left">
                <ul>
                    <li class="right bottom">
                        <i class="iconfont icon-Rrl_s_084"></i>
                        <p>小米秒杀</p>
                    </li>
                    <li class="right bottom">
                        <i class="iconfont icon-liwu"></i>
                        <p>企业团购</p>
                    </li>
                    <li class="bottom">
                        <i class="iconfont icon-xiaomishangchengFma"></i>
                        <p>F码通道</p>
                    </li>
                    <li class="right">
                        <i class="iconfont icon-mifenqia"></i>
                        <p>米粉卡</p>
                    </li>
                    <li class="right">
                        <i class="iconfont icon-yijiuhuanxin"></i>
                        <p>以旧换新</p>
                    </li>
                    <li class="">
                        <i class="iconfont icon-huafeichongzhi"></i>
                        <p>话费充值</p>
                    </li>
                </ul>
            </div>
            <div class="square-right">
                <ul>
                    <li>
                        <img src="./picture/square_01.jpg" alt="">
                    </li>
                    <li>
                        <img src="./picture/square_02.jpg" alt="">
                    </li>
                    <li>
                        <img src="./picture/square_03.jpg" alt="">
                    </li>
                </ul>
            </div>
        </div>
        <!-- 小米闪购 -->
        <div class="shangou">
            <div class="shangou-top">
                <h2>小米闪购</h2>
            </div>
            <div class="shangou-center">
                <ul>
                    <li class="a">
                        <img src="./picture/shandian.png" alt="">
                        <div>暂无闪购活动</div>
                    </li>
                    <li class="b"></li>
                    <li class="c"></li>
                    <li class="d"></li>
                    <li class="e"></li>
                </ul>
            </div>
            <div class="shangou-bottom content-bottom">
                <img src="./picture/buttom-01.jpg" alt="">
            </div>
        </div>
        <!-- 内容 -->
        <div class="content">
            <!-- 手机 -->
            <div class="shouji">
                <div class="shouji-top">
                    <h2>手机</h2>
                    <div class="more">
                        <span>查看全部</span>
                        <i class="iconfont icon-dayu1"></i>
                    </div>
                </div>
                <div class="shouji-center">
                    <div class="shouji-center-left">
                        <img src="./picture/shouji-left.jpg" alt="">
                    </div>
                    <div class="shouji-center-right">
                        <ul>
                            <li>
                                <div class="green">新品</div>
                                <img src="./picture/shouji-right-01.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-02.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-03.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-04.png" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-05.png" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <div class="red">减200元</div>
                                <img src="./picture/shouji-right-06.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-07.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-08.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="shouji-bottom content-bottom">
                    <img src="./picture/bottom-02.jpg" alt="">
                </div>
            </div>
            <!-- 家电 -->
            <div class="jiadian shouji">
                <div class="jiadian-top shouji-top">
                    <h2>家电</h2>
                    <div class="more">
                        <ul>
                            <li><a href="">热门</a></li>
                            <li><a href="">电视影音</a></li>
                            <li><a href="">电脑</a></li>
                            <li><a href="">家居</a></li>
                        </ul>
                    </div>
                </div>
                <div class="jiadian-center shouji-center">
                    <div class="shouji-center-left">
                        <img src="./picture/jd-top.jpg" alt="">
                        <img src="./picture/jd-bottom.jpg" alt="">
                    </div>
                    <div class="shouji-center-right">
                        <ul>
                            <li>
                                <div class="green">减100元</div>
                                <img src="./picture/shouji-right-01.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-02.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-03.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-04.png" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-05.png" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <div class="red">减200元</div>
                                <img src="./picture/shouji-right-06.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-07.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <div class="s-top">
                                    <span class="left">
                                        <h3>米家电烤箱</h3>
                                        <div class="price">299元</div>
                                    </span>
                                    <span>
                                        <img src="./picture/s-top.jpg" alt="">
                                    </span>
                                </div>
                                <div class="s-bottom">
                                    <span class="left">
                                        <h3>浏览更多</h3>
                                        <div class="rm">热门</div>
                                    </span>
                                    <span>
                                        <img src="./picture/s-bottom.jpg" alt="">
                                    </span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="shouji-bottom content-bottom">
                    <img src="./picture/jiadian.jpg" alt="">
                </div>
            </div>
            <!-- 智能 -->
            <div class="jiadian shouji">
                <div class="jiadian-top shouji-top">
                    <h2>智能</h2>
                    <div class="more">
                        <ul>
                            <li><a href="">热门</a></li>
                            <li><a href="">电视影音</a></li>
                            <li><a href="">电脑</a></li>
                            <li><a href="">家居</a></li>
                        </ul>
                    </div>
                </div>
                <div class="jiadian-center shouji-center">
                    <div class="shouji-center-left">
                        <img src="./picture/jd-top.jpg" alt="">
                        <img src="./picture/jd-bottom.jpg" alt="">
                    </div>
                    <div class="shouji-center-right">
                        <ul>
                            <li>
                                <div class="green">减100元</div>
                                <img src="./picture/shouji-right-01.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-02.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-03.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-04.png" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-05.png" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <div class="red">减200元</div>
                                <img src="./picture/shouji-right-06.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-07.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <div class="s-top">
                                    <span class="left">
                                        <h3>米家电烤箱</h3>
                                        <div class="price">299元</div>
                                    </span>
                                    <span>
                                        <img src="./picture/s-top.jpg" alt="">
                                    </span>
                                </div>
                                <div class="s-bottom">
                                    <span class="left">
                                        <h3>浏览更多</h3>
                                        <div class="rm">热门</div>
                                    </span>
                                    <span>
                                        <img src="./picture/s-bottom.jpg" alt="">
                                    </span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="shouji-bottom content-bottom">
                    <img src="./picture/jiadian.jpg" alt="">
                </div>
            </div>
            <!-- 搭配 -->
            <div class="dapei jiadian shouji">
                <div class="jiadian-top shouji-top">
                    <h2>搭配</h2>
                    <div class="more">
                        <ul>
                            <li><a href="">热门</a></li>
                            <li><a href="">电视影音</a></li>
                            <li><a href="">电脑</a></li>
                            <li><a href="">家居</a></li>
                        </ul>
                    </div>
                </div>
                <div class="jiadian-center shouji-center">
                    <div class="shouji-center-left">
                        <img src="./picture/jd-top.jpg" alt="">
                        <img src="./picture/jd-bottom.jpg" alt="">
                    </div>
                    <div class="shouji-center-right">
                        <ul>
                            <li>
                                <div class="green">减100元</div>
                                <img src="./picture/shouji-right-01.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-02.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-03.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-04.png" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-05.png" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li class="d">
                                <div class="d-top s-top">
                                    <span class="left">
                                        <h3>米家电烤箱</h3>
                                        <div class="price">299元</div>
                                    </span>
                                    <span>
                                        <img src="./picture/s-top.jpg" alt="">
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="d-top s-bottom">
                                    <span class="left">
                                        <h3>浏览更多</h3>
                                        <div class="rm">热门</div>
                                    </span>
                                    <span>
                                        <img src="./picture/s-bottom.jpg" alt="">
                                    </span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="shouji-bottom content-bottom">
                    <img src="./picture/jiadian.jpg" alt="">
                </div>
            </div>
            <!-- 配件 -->
            <div class="jiadian shouji">
                <div class="jiadian-top shouji-top">
                    <h2>配件</h2>
                    <div class="more">
                        <ul>
                            <li><a href="">热门</a></li>
                            <li><a href="">电视影音</a></li>
                            <li><a href="">电脑</a></li>
                            <li><a href="">家居</a></li>
                        </ul>
                    </div>
                </div>
                <div class="jiadian-center shouji-center">
                    <div class="shouji-center-left">
                        <img src="./picture/jd-top.jpg" alt="">
                        <img src="./picture/jd-bottom.jpg" alt="">
                    </div>
                    <div class="shouji-center-right">
                        <ul>
                            <li>
                                <div class="green">减100元</div>
                                <img src="./picture/shouji-right-01.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-02.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-03.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-04.png" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-05.png" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <div class="red">减200元</div>
                                <img src="./picture/shouji-right-06.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-07.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <div class="s-top">
                                    <span class="left">
                                        <h3>米家电烤箱</h3>
                                        <div class="price">299元</div>
                                    </span>
                                    <span>
                                        <img src="./picture/s-top.jpg" alt="">
                                    </span>
                                </div>
                                <div class="s-bottom">
                                    <span class="left">
                                        <h3>浏览更多</h3>
                                        <div class="rm">热门</div>
                                    </span>
                                    <span>
                                        <img src="./picture/s-bottom.jpg" alt="">
                                    </span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="shouji-bottom content-bottom">
                    <img src="./picture/jiadian.jpg" alt="">
                </div>
            </div>
            <!-- 周边 -->
            <div class="jiadian shouji">
                <div class="jiadian-top shouji-top">
                    <h2>周边</h2>
                    <div class="more">
                        <ul>
                            <li><a href="">热门</a></li>
                            <li><a href="">电视影音</a></li>
                            <li><a href="">电脑</a></li>
                            <li><a href="">家居</a></li>
                        </ul>
                    </div>
                </div>
                <div class="jiadian-center shouji-center">
                    <div class="shouji-center-left">
                        <img src="./picture/jd-top.jpg" alt="">
                        <img src="./picture/jd-bottom.jpg" alt="">
                    </div>
                    <div class="shouji-center-right">
                        <ul>
                            <li>
                                <div class="green">减100元</div>
                                <img src="./picture/shouji-right-01.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-02.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-03.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-04.png" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-05.png" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <div class="red">减200元</div>
                                <img src="./picture/shouji-right-06.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <img src="./picture/shouji-right-07.jpg" alt="">
                                <h3>小米9 6GB+128GB</h3>
                                <p>骁龙855，索尼4800万超广角微距三摄</p>
                                <div class="price">
                                    <span>2599元</span>
                                    <span>2999元</span>
                                </div>
                            </li>
                            <li>
                                <div class="s-top">
                                    <span class="left">
                                        <h3>米家电烤箱</h3>
                                        <div class="price">299元</div>
                                    </span>
                                    <span>
                                        <img src="./picture/s-top.jpg" alt="">
                                    </span>
                                </div>
                                <div class="s-bottom">
                                    <span class="left">
                                        <h3>浏览更多</h3>
                                        <div class="rm">热门</div>
                                    </span>
                                    <span>
                                        <img src="./picture/s-bottom.jpg" alt="">
                                    </span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="shouji-bottom content-bottom">
                    <img src="./picture/jiadian.jpg" alt="">
                </div>
            </div>
        </div>
        <!-- 内容_02 -->
        <div class="content-t">
            <!-- 热门推荐 -->
            <div class="tuijian">
                <div class="tuijian-top">
                    <h2>为你推荐</h2>
                    <div class="more">
                        <span class=""></span>
                        <span class=""></span>
                    </div>
                </div>
                <ul>
                    <li>
                        <img src="./picture/shouji-right-01.jpg" alt="">
                        <p>万超广角微距三摄</p>
                        <div class="price">
                            <span>2599元</span>
                        </div>
                    </li>
                    <li>
                        <img src="./picture/shouji-right-01.jpg" alt="">
                        <p>万超广角微距三摄</p>
                        <div class="price">
                            <span>2599元</span>
                        </div>
                    </li>
                    <li>
                        <img src="./picture/shouji-right-01.jpg" alt="">
                        <p>万超广角微距三摄</p>
                        <div class="price">
                            <span>2599元</span>
                        </div>
                    </li>
                    <li>
                        <img src="./picture/shouji-right-01.jpg" alt="">
                        <p>万超广角微距三摄</p>
                        <div class="price">
                            <span>2599元</span>
                        </div>
                    </li>
                    <li>
                        <img src="./picture/shouji-right-01.jpg" alt="">
                        <p>万超广角微距三摄</p>
                        <div class="price">
                            <span>2599元</span>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 热评产品 -->
            <div class="chanping tuijian">
                <div class="tuijian-top">
                    <h2>热评产品</h2>
                </div>
                <ul>
                    <li>
                        <img src="./picture/rp.jpg" alt="">
                        <p class="one">外观很漂亮，质量不错，像素很高，很清晰。</p>
                        <p class="two">来自于 曹建强 的评价</p>
                        <div class="price">
                            <p class="three">小米9 全网通版 8GB内存奥卡福jog素饭饭速度</p>
                            <span class="gang">|</span>
                            <span class="p">3299元</span>
                        </div>
                    </li>
                    <li>
                        <img src="./picture/rp.jpg" alt="">
                        <p class="one">外观很漂亮，质量不错，像素很高，很清晰。</p>
                        <p class="two">来自于 曹建强 的评价</p>
                        <div class="price">
                            <p class="three">小米9 全网通版 8GB内存奥卡福jog素饭饭速度</p>
                            <span class="gang">|</span>
                            <span class="p">3299元</span>
                        </div>
                    </li>
                    <li>
                        <img src="./picture/rp.jpg" alt="">
                        <p class="one">外观很漂亮，质量不错，像素很高，很清晰。</p>
                        <p class="two">来自于 曹建强 的评价</p>
                        <div class="price">
                            <p class="three">小米9 全网通版 8GB内存奥卡福jog素饭饭速度</p>
                            <span class="gang">|</span>
                            <span class="p">3299元</span>
                        </div>
                    </li>
                    <li>
                        <img src="./picture/rp.jpg" alt="">
                        <p class="one">外观很漂亮，质量不错，像素很高，很清晰。</p>
                        <p class="two">来自于 曹建强 的评价</p>
                        <div class="price">
                            <p class="three">小米9 全网通版 8GB内存奥卡福jog素饭饭速度</p>
                            <span class="gang">|</span>
                            <span class="p">3299元</span>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 内容 -->
            <div class="neirong">
                <div class="neirong-top">
                    <h2>内容</h2>
                </div>
                <div class="neirong-center">
                    <ul>
                        <li class="b">
                            <h3>图书</h3>
                            <p class="o">展现你的存在</p>
                            <p class="t">一本职场人的演说指导书</p>
                            <div class="price">5.99元</div>
                            <img src="./picture/tushu.png" alt="">
                        </li>
                        <li class="c b">
                            <h3>MIUI主题</h3>
                            <p class="o">展现你的存在</p>
                            <p class="t">一本职场人的演说指导书</p>
                            <div class="price">5.99元</div>
                            <img src="./picture/tushu.png" alt="">
                        </li>
                        <li class="d b">
                            <h3>游戏</h3>
                            <p class="o">展现你的存在</p>
                            <p class="t">一本职场人的演说指导书</p>
                            <div class="price">5.99元</div>
                            <img src="./picture/tushu.png" alt="">
                        </li>
                        <li class="e b">
                            <h3>应用</h3>
                            <p class="o">展现你的存在</p>
                            <p class="t">一本职场人的演说指导书</p>
                            <div class="price">5.99元</div>
                            <img src="./picture/tushu.png" alt="">
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 视频 -->
            <div class="shiping">
                <div class="shiping-top">
                    <h2>视频</h2>
                    <div class="more">
                        <a href="">查看全部</a>
                        <i class="iconfont icon-dayu1"></i>
                    </div>
                </div>
                <div class="shiping-center">
                    <ul>
                        <li>
                            <img src="./picture/sp.png" alt=""></img>
                            <p class="a">小米CC9</p>
                            <p class="b">深蓝星球</p>
                        </li>
                        <li>
                            <img src="./picture/sp.png" alt=""></img>
                            <p class="a">小米CC9</p>
                            <p class="b">深蓝星球</p>
                        </li>
                        <li>
                            <img src="./picture/sp.png" alt=""></img>
                            <p class="a">小米CC9</p>
                            <p class="b">深蓝星球</p>
                        </li>
                        <li>
                            <img src="./picture/sp.png" alt=""></img>
                            <p class="a">小米CC9</p>
                            <p class="b">深蓝星球</p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- footer -->
            <div class="footer">
                <div class="footer-top">
                    <ul>
                        <li>
                            <i class="iconfont icon-weixiu"></i>
                            <span>预约维修服务</span>
                        </li>
                        <li>
                            <i class="iconfont icon-weixiu"></i>
                            <span>预约维修服务</span>
                        </li>
                        <li>
                            <i class="iconfont icon-weixiu"></i>
                            <span>预约维修服务</span>
                        </li>
                        <li>
                            <i class="iconfont icon-weixiu"></i>
                            <span>预约维修服务</span>
                        </li>
                        <li>
                            <i class="iconfont icon-weixiu"></i>
                            <span>预约维修服务</span>
                        </li>
                    </ul>
                </div>
                <div class="footer-center">
                    <div class="footer-center-left">
                        <dl>
                            <dt>帮助中心</dt>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                        </dl>
                        <dl>
                            <dt>帮助中心</dt>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                        </dl>
                        <dl>
                            <dt>帮助中心</dt>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                        </dl>
                        <dl>
                            <dt>帮助中心</dt>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                        </dl>
                        <dl>
                            <dt>帮助中心</dt>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                        </dl>
                        <dl>
                            <dt>帮助中心</dt>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                        </dl>
                    </div>
                    <div class="footer-center-right">
                        <div class="tel">400-100-5678</div>
                        <div class="time">9:00-18:00 (仅收市话费)</div>
                        <button>人工客服</button>
                        <div class="wx">
                            <span>关注小米：</span>
                            <span class="iconfont icon-weixin"></span>
                            <span class="iconfont icon-xinlangweibo"></span>
                        </div>
                    </div>
                </div>
                <div class="footer-bottom">
                    <div class="footer-in">
                        <div class="footer-in-left">
                            <img src="./picture/logo.png" alt=""></img>
                        </div>
                        <div class="footer-in-right">
                            <ul>
                                <li>
                                    <a href="">小米商城</a>
                                </li>
                                <li>
                                    <a href="">小米商城</a>
                                </li>
                                <li>
                                    <a href="">小米商城</a>
                                </li>
                                <li>
                                    <a href="">小米商城</a>
                                </li>
                                <li>
                                    <a href="">小米商城</a>
                                </li>
                                <li>
                                    <a href="">小米商城</a>
                                </li>
                                <li>
                                    <a href="">小米商城</a>
                                </li>
                                <li>
                                    <a href="">小米商城</a>
                                </li>
                                <li>
                                    <a href="">小米商城</a>
                                </li>
                                <li>
                                    <a href="">小米商城</a>
                                </li>
                                <li>
                                    <a href="">小米商城</a>
                                </li>
                                <li>
                                    <a href="">小米商城</a>
                                </li>
                                <li>
                                    <a href="">小米商城</a>
                                </li>
                                <li>
                                    <a href="">小米商城</a>
                                </li>
                                <li>
                                    <a href="">小米商城</a>
                                </li>
                                <li>
                                    <a href="">小米商城</a>
                                </li>
                            </ul>
                            <div class="c-in">
                                <p>爱神的箭的加减法佛飞机设计阶段覅殴打附近的几个分工北京的攻击敌人攻击的给时代的</p>
                                <p>萨蒂是否合法呼唤ii狐狸哦IP计划的分工的感慨是风景的房间分割结果时间trot进入太空让他开通但是大家</p>
                                <p>十分激动个发动机反对派覅制定法规让他客人退款二通过是否妇科大夫</p>
                                <p>伺服电机豆腐干和第四个苟富贵的和司法机关付款后1记得发给发票好看飞机尽快的父母方法可佛的法人机构飞机覅偶分谁的速度快</p>
                            </div>
                            <div class="info-links">
                                <a rel="nofollow"
                                    href="//privacy.truste.com/privacy-seal/validation?rid=4fc28a8c-6822-4980-9c4b-9fdc69b94eb8&amp;lang=zh-cn"
                                    target="_blank"><img rel="nofollow" src="//i1.mifile.cn/f/i/17/site/truste.png"
                                        alt="TRUSTe Privacy Certification"></a>
                                <a rel="nofollow" href="//search.szfw.org/cert/l/CX20120926001783002010"
                                    target="_blank"><img rel="nofollow" src="//s01.mifile.cn/i/v-logo-2.png"
                                        alt="诚信网站"></a>
                                <a rel="nofollow"
                                    href="https://ss.knet.cn/verifyseal.dll?sn=e12033011010015771301369&amp;ct=df&amp;pa=461082"
                                    target="_blank"><img rel="nofollow" src="//s01.mifile.cn/i/v-logo-1.png"
                                        alt="可信网站"></a>
                                <a rel="nofollow" href="http://www.315online.com.cn/member/315140007.html"
                                    target="_blank"><img rel="nofollow" src="//s01.mifile.cn/i/v-logo-3.png"
                                        alt="网上交易保障中心"></a>
                                <a rel="nofollow" href="https://www.mi.com/service/buy/commitment/" target="_blank"><img
                                        rel="nofollow"
                                        src="//i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png"
                                        alt="诚信经营 放心消费"></a>
                                <a rel="nofollow"
                                    href="https://webcert.cnmstl.net/cert/grade?sn=3af21034e35011eab3ea00163e068ceb"
                                    class="safe-auth J_safeAuth active"><img rel="nofollow"
                                        src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/f1ee261b96ae71e845efba398efeca02.png"
                                        class="img1"><img rel="nofollow"
                                        src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/8618b0f0deda20b554f72850bfca04a9.png"
                                        class="img2"></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 侧栏 -->
            <div class="end">
                <a href="" class="iconfont icon-shouji"></a>
                <a href="" class="iconfont icon-renwu-ren"></a>
                <a href="" class="iconfont icon-weixiu"></a>
                <a href="" class="iconfont icon-kefu"></a>
                <a href="" class="iconfont icon-gouwuche"></a>
                <a href="#">
                    <button class="iconfont icon-huidaodingbu"></button>
                </a>
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
    <script>
        window.addEventListener('load', function () {
            var swiper = new Swiper(".mySwiper", {
                loop: true,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                },
                initialSlide: 0,
                effect: "fade",
                speed: 1000,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                pagination: {
                    el: ".swiper-pagination",
                },
            });
        });

        window.addEventListener('scroll', function () {
            const topEl = document.querySelector('.top')
            if (window.scrollY >= 40) {
                topEl.style.position = 'fixed';
                topEl.style.top = '0';
                topEl.style.left = '0';
                topEl.style.right = '0';
                topEl.style.zIndex = '9999';
                topEl.style.backgroundColor = '#fff';
                topEl.style.marginTop = '0'
            } else {
                topEl.style.position = 'relative';
                topEl.style.top = '0';
            }
        })

        //回到顶部侧栏
        document.addEventListener('DOMContentLoaded', function () {
            const topButton = document.querySelector('.end a button');
            window.onscroll = function () {
                if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
                   topButton.style.display = "block";
                } else {
                    topButton.style.display = "none";
                }
            };
            topButton.onclick = function () {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            };
        });

    </script>
</body>

</html>